<template>
	<view class="qr-code">
		<view class="slogan-container">
			<u-image
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/df49d93b-152a-4317-94b5-0cbd85fbeea4.png"
				width="472" height="88" />
			<text class="slogan">畅享十项金牌服务，更多佣金任你领</text>
		</view>
		<view class="qr-code-main">
			<uqrcode class="qrcode" v-if="isQrCodeShow" ref="qrcode" canvas-id="qrcode"
				value="https://www.prsguitars.com.cn/" :size="qrcodeSize" />
		</view>
		<button class="share-button" @click="save">保存二维码，分享好友</button>
		<canvas style="width: 375px;height: 812px;position: relative;border: 1px red solid;" canvas-id="canvasposter"
			id="canvasposter"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isQrCodeShow: false,
			}
		},
		mounted() {
			this.isQrCodeShow = true;
		},
		computed: {
			qrcodeSize() {
				const proportion = 163 / 375;
				return this.$systemInfo.screenWidth * proportion;
			}
		},
		methods: {
			save() {
				this.$refs.qrcode.toTempFilePath({
						success: async qrCodeResult => {
							const qrCodeTempFilePath = qrCodeResult.tempFilePath;
							uni.getImageInfo({
									src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/92d34ed2-52ef-4f1b-9df2-b29eac51375a.png',
									success: (posterResult) => {
										const posterBgTempFilePath = posterResult.path;
										console.log(posterBgTempFilePath)
										console.log(qrCodeTempFilePath)
										const ctx = uni.createCanvasContext('canvasposter');
										ctx.rect(0, 0, 375, 812);
										ctx.fillRect(0, 0, 375, 812);
										ctx.drawImage(posterBgTempFilePath, 0, 0, 375, 812);
										ctx.drawImage(qrCodeTempFilePath, 119, 415, 146, 146);
										ctx.draw(false, () => {
												uni.canvasToTempFilePath({
													canvasId: 'canvasposter',
													success: (canvasResult) => {
														const posterTempFilePath =
															canvasResult.tempFilePath;
														uni.saveImageToPhotosAlbum({
															filePath: posterTempFilePath,
															success: () => {
																this.$showToast('保存成功')
															},
															fail: () => {
																this.$showToast('保存失败')
															}
														});
													},
													fail: (canvasError) => {
														console.log(canvasError);
														this.$showToast('生成分享海报失败');
													}
												}, this)
										});
								},
								fail: (posterError) => {
									console.log(posterError);
									this.$showToast('生成分享海报失败');
								}
							})










						// try {
						// 	const qrCodeTempFilePath = qrCodeResult.tempFilePath;
						// 	console.log(qrCodeTempFilePath)
						// 	const posterBgTempFilePath = (await uni.getImageInfo({
						// 		src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/92d34ed2-52ef-4f1b-9df2-b29eac51375a.png',
						// 	}))[1].path;
						// 	console.log(posterBgTempFilePath)
						// 	const ctx = uni.createCanvasContext('canvasposter');
						// 	ctx.rect(0, 0, 375, 812);
						// 	// ctx.setFillStyle('white');
						// 	ctx.fillRect(0, 0, 375, 812);
						// 	ctx.drawImage(posterBgTempFilePath, 0, 0, 375, 812);
						// 	ctx.drawImage(qrCodeTempFilePath, 119, 415, 146, 146);
						// 	// ctx.font = '14px ZhenyanGB';
						// 	// ctx.fillStyle = '#ffffff';
						// 	// ctx.fillText('微信扫描二维码，了解更多详情', 90, 644);
						// 	// ctx.draw(false, this.getTempFilePath);
						// 	await ctx.draw(false);
						// 	const posterTempFilePath = (await uni.canvasToTempFilePath({
						// 		canvasId: 'canvasposter'
						// 	}, this))[1].tempFilePath;
						// 	// const posterTempFilePath = await uni.canvasToTempFilePath({
						// 	// 	canvasId: 'canvasposter'
						// 	// });
						// 	console.log(posterTempFilePath)
						// 	await uni.saveImageToPhotosAlbum({
						// 		filePath: posterTempFilePath
						// 	});
						// 	this.$showToast('保存成功');
						// } catch (e) {
						// 	console.log(e)
						// 	this.$showToast('保存失败');
						// }
					},
					fail: qrCodeError => {
						this.$showToast('生成分享海报失败');
					}
				});
		}
	}
	}
</script>

<style scoped lang="scss">
	@import "./qrCode.scss";
</style>
